<template>
  <view class="attendance-container">
    <!-- 顶部用户信息 -->
    <view class="header">
      <view class="user-info" @click="addCount">
        <image class="avatar" :src="info.avatar" mode="aspectFill"></image>
        <view class="user-details">
          <text class="username">{{ info.username }}</text>
          <text class="greeting">{{
            mType == "AM" ? "Good morning~" : "Good afternoon~"
          }}</text>
        </view>
      </view>
      <view class="weather">
        <text class="period">{{ mType }}</text>
        <image
          v-if="mType == 'AM'"
          class="weather-icon"
          src="/static/uniapp/am.png"
          mode="aspectFill"
        >
        </image>
        <image
          v-else
          class="weather-icon"
          src="/static/uniapp/pm.png"
          mode="aspectFill"
        ></image>
      </view>
    </view>

    <!-- 打卡按钮 -->
    <view class="punch-container">
      <view class="punch-button" @click="navigatePunch">
        <image
          v-if="isWork"
          @click.stop="handleErr"
          class="punch-icon"
          src="/static/uniapp/err.png"
          mode="aspectFill"
        ></image>
        <image
          v-else-if="currentRule && currentRule.length > 1"
          class="punch-icon"
          src="/static/uniapp/att.png"
          mode=""
        >
        </image>
        <image
          v-else
          class="punch-icon"
          src="/static/uniapp/out.png"
          mode=""
        ></image>
      </view>
    </view>

    <!-- 应用区域 -->
    <view class="application-section">
      <view class="section-title">
        <text class="title-text">Initiate an application</text>
        <text class="subtitle-text">You can file your application here</text>
      </view>

      <view class="application-actions">
        <view class="action-card" @click="navigateToLeave">
          <image
            class="action-icon"
            src="/static/uniapp/leave.png"
            mode="aspectFit"
          ></image>
          <text class="action-text">Ask for leave</text>
        </view>
        <view class="action-card" @click="navigateToTimecard">
          <image
            class="action-icon"
            src="/static/uniapp/timecard.png"
            mode="aspectFit"
          ></image>
          <text class="action-text">Make a new timecard</text>
        </view>
      </view>
    </view>

    <!-- 申请记录 -->
    <view class="my-applications">
      <view class="section-header" @click="navigateToApplications">
        <view class="header-left">
          <text class="header-title">My application</text>
          <text class="badge">{{ splength }}</text>
        </view>
        <view class="header-subtitle">
          <text>Applications that have not yet been reviewed</text>
        </view>
        <view class="header-right">
          <uv-icon name="arrow-right" color="#0E623D" bold size="19"></uv-icon>
        </view>
      </view>

      <!-- 申请记录列表 -->
      <view class="application-list">
        <u-list @scrolltolower="scrolltolower">
          <u-list-item
            v-for="(item, index) in applications"
            :key="index"
            class="application-item"
            @click="viewApplication(item)"
          >
            <view class="application-header">
              <text class="application-type">Leave application</text>
              <text class="application-date">{{
                $dayjs(item.created_at).format('YYYY-MM-DD hh:MM:ss')
              }}</text>
            </view>
            <view class="application-details">
              <div class="round"></div>
							<div class="status">{{
								item.status == 3 ? 'Agree' : item.status == 4 ?'Turn down':'To be reviewed' }}</div>
              <view class="detail-row">
                <!-- <view class="status-dot"></view> -->
                <text class="detail-label">Initiate :</text>
                <text class="detail-value">{{
                  item.start_time&&$dayjs(item.start_time).format('YYYY-MM-DD')
                }}</text>
              </view>
              <view class="detail-row">
                <text class="detail-label">Finish :</text>
                <text class="detail-value">{{
                  item.end_time&& $dayjs(item.end_time).format('YYYY-MM-DD')
                }}</text>
              </view>
              <view class="detail-row">
                <text class="detail-label">Duration :</text>
                <text class="detail-value">{{ item.days }}</text>
              </view>
            </view>
          </u-list-item>
        </u-list>
        <!-- <view v-for="(item, index) in applications" :key="index" class="application-item"
					@click="viewApplication(item)">
					<view class="application-header">
						<text class="application-type">Leave application</text>
						<text class="application-date">{{ $dayjs(item.created_at, 'YYYY-MM-DD hh:MM:ss') }}</text>
					</view>
					<view class="application-details">
						<div class="round"></div>
						<view class="detail-row">
							<text class="detail-label">Initiate :</text>
							<text class="detail-value">{{ $dayjs(item.start_time, 'YYYY-MM-DD hh:MM:ss') }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">Finish :</text>
							<text class="detail-value">{{ $dayjs(item.end_time, 'YYYY-MM-DD hh:MM:ss') }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">Duration :</text>
							<text class="detail-value">{{ item.days }}</text>
						</view>
					</view>
				</view> -->
      </view>
    </view>
    <uv-load-more :status="loadingType" />
  </view>
</template>

<script>
import { getreplacementList } from "@/api/approval";
import { getStatus } from "@/api/attendace";

import { mapState, mapActions } from "pinia";
import { useUserinfoStore } from "@/store/info";
export default {
  data() {
    return {
      isWork: true,
      canAttendanceMessage: "",
      page: 1,
      loadingType: "",
      mType: "AM",
      splength: '',
      currentRule: [],
      applications: [],
    };
  },
  computed: {
    ...mapState(useUserinfoStore, ["info", 'getlocation']),
  },

  async onShow() {
    await this.getlocation()
    const now = new Date();
    const hour = now.getHours();
    if (hour < 12) {
      console.log("当前时间是上午");
      this.mType = "AM";
    } else {
      console.log("当前时间是下午");
      this.mType = "PM";
    }
    this.getList();
    this.getStatusData();
  },
  onPullDownRefresh() {
    console.log("onPullDownRefresh");
    this.getList();
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    console.log("onReachBottom");
    this.getList("more");
  },
  methods: {
    scrolltolower() {
      console.log("scrolltolower");
      this.getList("more");
    },
    viewApplication(item) {
      uni.navigateTo({
        url: "/pages/Approval/approvalDetail?id=" + item.id,
      });
    },
    async getList(type = "refresh") {
      if (type === "refresh") {
        this.page = 1;
        this.applications = [];
      } else if (this.loadingType === "nomore") {
        return;
      }
      this.loadingType = "loading";
      let apiData = {
        status: this.activeTab == "toBeReviewed" ? 0 : -1,
        searchText: this.searchText,
        page: this.page,
        limit: 10,
      };
      console.log("getList", apiData);
      let { list, total } = await getreplacementList(apiData);
      if (list.length < 10) {
        if (type === "refresh") this.loadingType = "nodata";
        if (type === "more") this.loadingType = "nomore";
      }
      this.splength = total;
      this.page++;
      this.applications =
        type === "refresh" ? list : this.applications.concat(list);
    },
    getStatusData() {
      getStatus(this.info.location).then((res) => {
        console.log("getStatus", res);
        this.isWork = !res.canAttendance;
        this.canAttendanceMessage = res.canAttendanceMessage;
        this.currentRule = res.current_rule;
      });
    },
    handleErr() {
      //打卡失败
      uni.$uv.toast(this.canAttendanceMessage || "Check in failed!");
			setTimeout(()=>{
				this.navigatePunch()
			},500)
    },
    navigatePunch() {
      uni.navigateTo({
        url: "/pages/Home/Attendance",
      });
    },
    navigateToLeave() {
      uni.navigateTo({
        url: "/pages/Home/cardReplacement?type=askForLeave",
      });
    },
    navigateToTimecard() {
      uni.navigateTo({
        url: "/pages/Home/cardReplacement?type=cardReplacement",
      });
    },
    addCount() {
      uni.$uv.route({
        type: "tab",
        url: "/pages/Mine/mine",
      });
    },
    navigateToApplications() {
      uni.$uv.route({
        type: "tab",
        url: "/pages/Approval/approval",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.attendance-container {
  margin-bottom: 100rpx;
}

/* 顶部用户信息样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 2rpx solid #f0f0f0;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.greeting {
  font-size: 28rpx;
  color: #006400;
}

.weather {
  display: flex;
  align-items: center;
}

.period {
  font-size: 28rpx;
  margin-right: 20rpx;
  color: #006400;
}

.weather-icon {
  width: 76rpx;
  height: 76rpx;
  border-radius: 50%;
}

/* 打卡按钮样式 */
.punch-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60rpx 0;
  background-color: #f5f5f5;
}

.punch-button {
  width: 300rpx;
  height: 300rpx;
  background-color: #e8f0f0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
}

.punch-icon {
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 10rpx;
}

/* 应用区域样式 */
.application-section {
  background-color: #fff;
  padding: 30rpx;
  margin: 20rpx 20rpx;
  border-radius: 20rpx;
}

.section-title {
  margin-bottom: 30rpx;
}

.title-text {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.subtitle-text {
  font-size: 26rpx;
  color: #666;
  margin-top: 10rpx;
  display: block;
}

.application-actions {
  display: flex;
  justify-content: space-between;
}

.action-card {
  flex: 1;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 10rpx 0 10rpx 10rpx;
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  margin: 0 10rpx;
}

.action-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 20rpx;
}

.action-text {
  font-size: 28rpx;
  color: #333;
}

/* 申请记录样式 */
.my-applications {
  background-color: #fff;
  margin: 0 20rpx 20rpx;
  border-radius: 20rpx;
}

.section-header {
  padding: 30rpx;
  border-bottom: 1px solid #eee;
  position: relative;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

.badge {
  background-color: #006400;
  color: #fff;
  font-size: 24rpx;
  padding: 2rpx 16rpx;
  border-radius: 20rpx;
  margin-left: 10rpx;
}

.header-subtitle {
  font-size: 26rpx;
  color: #666;
  margin-top: 10rpx;
}

.header-right {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
}

.icon-right {
  font-size: 40rpx;
  color: #006400;
}

// .application-list {
// 	padding-bottom: 30rpx;
// }

.application-item {
  // padding: 0 80rpx;
  position: relative;
  /* border-bottom: 1px solid #eee; */
}

.application-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
  padding: 20rpx 15rpx;
  background: linear-gradient(to right, #e8f7f1, #fff);
}

.application-type {
  font-size: 30rpx;
  color: #006400;
  font-weight: bold;
}

.application-date {
  font-size: 26rpx;
  color: #999;
}

.application-details {
  margin-left: 80rpx;
  position: relative;
	.status{
		height: 46rpx;
		line-height: 46rpx;
		width: 174rpx;
		text-align: center;
		background: #127F4E;
		border-radius: 25px;
		font-weight: 500;
		font-size: 10px;
		color: #FFFFFF;
		position: absolute;
		right: 24rpx;
		bottom: 24rpx;
	}
  .round {
    width: 26rpx;
    height: 26rpx;
    border-radius: 50%;
    border: 4rpx solid #0e623d;
    position: absolute;
    left: -46rpx;
    top: 4rpx;
  }
}

.detail-row {
  display: flex;
  align-items: center;
  padding-bottom: 15rpx;
}

.status-dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #006400;
  margin-right: 10rpx;
}

.detail-label {
  width: 140rpx;
  font-size: 28rpx;
  color: #666;
}

.detail-value {
  font-size: 28rpx;
  color: #333;
}
</style>
